<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css.cssa" />
<title>Template Documentation</title>
</head>
<style>
body {
background-color: #fff;
color: #000;
font-family: verdana;
font-size: 13px;
line-height: 1.5em;
}

.clear { clear: both }
.left { float: left }

h1 {
	text-align: center;
	color: #666; 
	font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif; 
	font-style: italic;
	font-weight: normal;
}

h2 {
	text-align: left;
	color: #666; 
	font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif; 
	font-style: italic;
	font-weight: normal;
}

h3 {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid #e4e4e4;
}

#container {
	margin: 0 auto;
	width: 900px;
	background-color: #fff;
	border: 1px solid #a8a8a8;
}

#wrapper {
	margin: 0 auto;
	width: 810px;
}

#credit {
	margin: 0 auto;
	width: 100%;
	border: 1px solid #a8a8a8;
	font-size: 12px;
}

.title {
	font-size: 25px;
	font-weight: normal;
	line-height: 3em;
}

.col1 {
	background-color: #f8f8f8;
	width: 30%;
	padding: 0px 20px;
}

.col2 {
	width: 70%;
	padding: 0px 20px;
}
</style>
<body>

	<div id="container">
	<div id="wrapper">
		<h1>Template Documentation</h1>
		<span class="title">Easy Coming Soon with Pie Chart, 10 colors + Bonus</span>
		<table id="credit">
			<tr>
				<td class="col1">
				<p>
				<strong>By:</strong> Mohammsd Musaad (mbiz)
				<br />
				<strong>Created:</strong> Dec.7.2009
				</p>

				</td>
				<td class="col2">
				<p>
				Thank you for purchasing my coming soon template, you will find all the help you need within this documentation, 
				for any further assistance feel free to contact me through <a href="http://themeforest.net/user/mbiz" />my themeforest homepage.</a>
				</p>
				</td>
			</tr>
		<table>
		<h2>Table of Contents</h2>
		<ul>
			<li><a href="#about">About This Template</a></li>
			<li><a href="#files">Files Included</a></li>
			<li><a href="#sources">Source Files</a></li>
			<li><a href="#installation">Customization and Installation</a></li>
			<li><a href="#logo">Customization: Logo Replacement</a></li>
			<li><a href="#pie">Customization: Pie Chart</a></li>
			<li><a href="#list">Mailing List</a></li>
			<li><a href="#bonus">BONUS Coming-Soon Template</a></li>
			<li><a href="#bonus-c">BONUS Template Customization</a></li>
		</ul>
		<h3><a name="about">About This Template</a></h3>
		<p>
		Easy Coming Soon is an easy and flexible under construction page that will easily let you define your upcoming website and represent it's current status, 
		supported by a nice looking easily editable pie chart, and ajaxed mailing-list form.
		</p>
		<h3><a name="files">Files Included</a></h3>
		<p>
		HTML files of this template is loacated inside "www" folder, categorized under several color schemes, each color scheme has it's seperate HTML, CSS, script files.<br />
		Additionally, "PSDs" folder contains
		fully layered template PSD files, however, I included "Logo.psd", "Pie Chart.psd", "Bonus Logo.psd", and "Bonus Note.psd" for easy and quick edit of those elements.
		</p>
		<h3><a name="sources">Source Files</a></h3>
		<ul>
			<li>Font: "Aller" <a href="http://www.fontsquirrel.com/fonts/Aller">http://www.fontsquirrel.com/fonts/Aller</a></i>
			<li>Ajax Mailing-list form is based on: <a href="http://www.webresourcesdepot.com/cool-and-free-launch-page-with-ajax-newsletter/">Cool And Free Launch Page With Ajax Newsletter</a></li>
		</ul>
		<h3><a name="installation">Customization and Installation</a></h3>
		<p>
		Installation is very easy, after inserting your data, upload files of your desired color scheme to your host server.<br />
		Changes you need to do:
		</p>
		<ul>
			<li>Replace your Logo (See below).</li>
			<li>Edit contact info located beside your logo (within index.php).</li>
			<li>Edit launch date (within index.php).</li>
			<li>Edit text that starts with: "Announcement or any important info..." (within index.php).</li>
			<li>Replace pie-chart image with the one that represent your current status (See below).</li>
			<li>Edit "About Us" info.</li>
			<li>Add links to social networking buttons (within index.php).</li>
			<li>change permission to "email-list.txt" file.</li>
		</ul>
		<h3><a name="logo">Customization: Logo Replacement</a></h3>
		<p>
		To insert your own logo, go to PSDs folder, open logo.psd
		</p>
		<img src="images/logo-rep.png" alt="Logo Replacement" />
		<p>
		Switch between "Dark Logo" and "Light Logo" group of layers. Then simply edit the text. You can insert a logo image of your own to the left of company name.
		You have this 500 pixel wide area, use it freely, and try to align your logo to the left.<br />
		When finished, crop it to get rid of sides blank areas, leave the height as is. Then save it for web as logo.png.
		</p>
		<img src="images/logo.png" alt="Logo" />
		<h3><a name="pie">Customization: Pie Chart</a></h3>
		<p>
		Inside "images" folder there's "pie" folder which contains 10 pie-chart images (10.png, 20.png, 30.png... 100.png), each one represensts a percentage; 10%, 20%, 30%... 
		to change the percentage of your current status you just edit the name of the image within index.php.
		</p>
		<img src="images/pie-charts.png" alt="Pie Chart Samples" />
		<p>
		I also included "Pie Chart.psd" for your convenience.
		</p>
		<h3><a name="list">Mailing List</a></h3>
		<p>
		Nothing needs to be changed here except file permissions of "email-list.txt". Give this file full permissions after you upload your coming-soon page. Emails will be
		saved to this file with ";" delimiter.
		</p>
		<h3><a name="bonus">BONUS Coming-Soon Template</a></h3>
		<p>
		You get this bonus coming-soon template for free when purchasing "Easy Coming Soon with Pie Chart, 10 colors + Bonus". BONUS folder is Located inside "www"
		</p>
		<h3><a name="bonus-c">BONUS Template Customization</a></h3>
		<ul>
			<li><strong>Logo Replacement:</strong> Go to "PSDs" folder, open "Bonus Logo.psd", edit text, and save it for web as logo.png (Should be PNG for transparency)</li>
			<li><strong>Edit Note:</strong> Go to "PSDs" folder, open "Bonus Note.psd", edit text, and save it for web as note.png  (Should be PNG for transparency)</li>
			<li><strong>Edit "About your website"</strong> section (within index.php)</li>
			<li><strong>Edit contact info</strong> (within index.php)</li>
			<li>Add links</strong> to social networking buttons (within index.php)</li>
			<li><strong>Change permission</strong> to "email-list.txt" file.</li>
		</ul>
		<h3>Thank you</h3>
		<p>
		For purchasing my template. Enjoy ;)
		</p>
	</div>
	</div><!-- end container -->

</body>
</html>
